<template>
	<div>


		<el-form ref="form" :model="form" label-width="100px" size="mini">
			<el-row>
				<el-col :span="6">
					<el-form-item label="病历号">
						<el-input v-model="id" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="姓名">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="6">
					<el-form-item label="性别">
						<el-select v-model="form.gender" placeholder="请选择性别">
							<el-option v-for="item in genderOptions" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="6">
					<el-form-item label="年龄">
						<el-input v-model="form.age"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="6">
					<el-form-item label="出生日期" prop="birthday">
						<el-date-picker v-model="form.birthday" value-format="yyyy-MM-dd" type="date" style="width: 160px;" placeholder="选择出生日期">
						</el-date-picker>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="身份证号" prop="idno">
						<el-input v-model="form.idno"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="10">
					<el-form-item label="家庭住址" prop="address">
						<el-input v-model="form.address"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="6">
					<el-form-item label="挂号级别" prop="regsitLevelId">
						<el-select v-model="form.regsitLevelId" placeholder="请选择级别" @change="changeLevel">
							<el-option v-for="item in regsitLevelOptions" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="挂号科室" prop="deptId">
						<el-select v-model="form.deptId" placeholder="请选择科室" @change="queryDoctor()">
							<el-option v-for="item in deptOptions" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="挂号医生" prop="doctorId">
						<el-select v-model="form.doctorId" placeholder="请选择医生">
							<el-option v-for="item in doctorOptions" :key="item.userId" :label="item.realname" :value="item.userId">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>



			</el-row>
			<el-col :span="6">
				<el-form-item label="看诊日期" prop="visittime">
					<el-date-picker v-model="form.visittime" value-format="yyyy-MM-dd" type="date" style="width: 160px;" placeholder="选择看诊日期">
					</el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="5">
				<el-form-item label="是否要病历本" prop="book">
					<el-radio-group v-model="form.book" size="mini" @change="calFee">
						<el-radio-button label="0">否</el-radio-button>
						<el-radio-button label="1">是</el-radio-button>
					</el-radio-group>

				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="应收金额" prop="fee">
					<el-input v-model="fee" disabled></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="7">
				<el-form-item>
					<!-- @click="save" -->
					<el-button type="primary" plain @click="save">挂号</el-button>
				</el-form-item>
			</el-col>
			</el-row>
		</el-form>


		<el-row class="tab">
			<el-col :span="24">

				<el-tag size="mini">已挂号信息</el-tag>
			</el-col>
		</el-row>

		<el-table :data="tableData" size="mini"  style="width: 100%">


			<el-table-column label="病历号"  prop="id">
			</el-table-column>
			
			<el-table-column label="患者名称" prop="name">
			</el-table-column>
			
			<el-table-column label="挂号的科室" prop="deptName">
			</el-table-column>
			
			<el-table-column label="号别" prop="levelName">
			</el-table-column>
			
			<el-table-column label="医生" prop="realname">
			</el-table-column>
			
			<el-table-column label="看诊时间" prop="visittime">
			</el-table-column>
			
			<el-table-column label="挂号状态" >
				<template slot-scope="scope">
					
					<el-tag v-if="scope.row.status == 1">已挂号</el-tag>
					<el-tag type="successss" v-else-if="scope.row.status == 2">已接诊</el-tag>
					<el-tag type="danger" v-else>已退号</el-tag>

				</template>
				
				
			</el-table-column>
			<el-table-column label="挂号时间" prop="createtime">
			</el-table-column>

		</el-table>


		<el-pagination background layout="prev, pager, next" @current-change="listRegister" :current-page.sync="query.pageNo"
		 :page-size="query.pageSize" :total="total">
		</el-pagination>




	</div>
</template>

<script>
	export default {
		name: 'Regist',
		components: {

		},
		data() {
			return {
				id: null,
				tableData:[],
				total:0,
				query: {
					pageSize: 5,
					pageNo: 1,
				},
				
				form: {

					name: '',
					gender: null,
					idno: '',
					birthday: '',
					age: '',
					address: '',
					visittime: null,
					regsitLevelId: null,
					deptId: null,
					doctorId: null,
					book: 0,
					status: 1,
					fee: 0
				},
				fee: 0,
				deptOptions: [],
				regsitLevelOptions: [],
				doctorOptions: [],
				genderOptions: [],
				
			}
		},
		methods: {
			loadData() {
				//加载机构列表
				this.axios.get('/dept?type=listAll', (data) => {
					this.deptOptions = data;
				});

				//加载挂号级别列表
				this.axios.get('/regist_level?type=queryList', (data) => {
					this.regsitLevelOptions = data;
				});
				//加载性别
				this.axios.get('/contant_item?type=listAll&code=XB', (data) => {
					this.genderOptions = data;
				});
			},
			queryDoctor() {
				console.log(this.form.deptId, this.form.regsitLevelId)


				if (this.form.deptId && this.form.regsitLevelId) {

					this.axios.get('/user?type=queryDoctor', (data) => {
						this.doctorOptions = data;
					}, {
						deptId: this.form.deptId,
						registLevel: this.form.regsitLevelId,

					})
				}
			},
			changeLevel() {
				this.queryDoctor();
				this.calFee();
			},
			calFee() {
				let fee = 0;
				for (let i = 0; i < this.regsitLevelOptions.length; i++) {
					if (this.regsitLevelOptions[i].id == this.form.regsitLevelId) {
						fee = this.regsitLevelOptions[i].fee;
						break;
					}
				}


				if (this.form.book == 1) {
					fee += 1;
				}

				this.fee = fee;

			},
			save() {




				this.axios.get('/register?type=save', (data) => {
					this.$message.success("挂号成功");
					this.clearForm();
					this.listRegister();

				}, this.form)


			},
			clearForm() {
				this.form = {

					name: '',
					gender: null,
					idno: '',
					birthday: '',
					age: '',
					address: '',
					visittime: null,
					regsitLevelId: null,
					deptId: null,
					doctorId: null,
					book: 0,
					status: 1,
					fee: 0
				}
			},
			listRegister(){
				
				this.axios.get('/register?type=query',(data)=>{
					this.tableData = data.list
					this.query.pageSize = data.pageSize;
					this.total = data.totalCount;
				},this.query)
			}
		},
		created() {
			this.loadData();
			this.listRegister();
		}
	}
</script>

<style scoped>
	.tab {
		margin-top: 20px;

	}
</style>
